<template>
  <div>
    <el-container class="home-container">
      <el-header class="header">
        <el-row>
          <el-col :span="20">
            <h1>Learning Platform Admin</h1>
          </el-col>
          <el-col :span="4" style="display: flex;  justify-content: flex-end;">
            <el-dropdown @command="handleCommand">
              <div class="welcome">欢迎您,{{this.userinfo.username}}</div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-avatar :size="50" :src="this.userinfo.picture"></el-avatar>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: 800px">
        <el-aside width="200px">
          <el-menu :default-active="this.$route.path" router  class="el-menu-vertical-demo" @select="getIndex">
            <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
              <template slot="title">
                <span> {{ item.navItem }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>


      <el-footer>
        <div>
          <el-divider content-position="center">Copyright ©️ 2023-present Learning Platform <el-link href="http://beian.miit.gov.cn/" target="_blank" >鄂ICP备2022008212号-1</el-link></el-divider>
        </div>
      </el-footer>
    </el-container>

    <el-dialog
        title="Learning Platform"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span>是否确定退出登录？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="logout">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

import {getUserInfo,logout} from "@/api/admin";
export default {
  name:'AdminHome',
  data() {
    return {
      userinfo:{},
      dialogVisible: false,
      navList: [
        { name: "/admin/home/task", navItem: "任务管理" },
        { name: "/admin/home/container", navItem: "容器管理" },
        { name: '/admin/home/ware',navItem: "文件管理"}
      ],
    }
  },
  methods:{
    getIndex(){

    },
    //点击确定退出登录
    logout(){
      logout().then(()=>{
        this.$router.push('/login/admin')
      })
    },
    handleCommand(){
      this.dialogVisible=this

    },
    getUserInfo(){
      getUserInfo().then(res=>{
        this.userinfo=res.data
      })
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style scoped>
.home-container{
  height: 100%;
}
.header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}
.welcome{
  margin-top: 15px;
  margin-right: 20px;
  font-size: 18px;
}
</style>
